<!--
  * desc：文字跑马灯
  * author：王文军
  * date：  2021/6/11 10:00
-->
<template>
  <div class="marquee-box">
    <div class="marquee-content" ref="out">
      <p :class="run?speed:''">
        <span class="text1" ref="in">{{ content }}</span>
        <span class="text2" v-if="run">{{ content }}</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VueMarquee',
  data() {
    return {
      run: false,
      pWidth: '',
    }
  },
  props: {
    content: {
      default: "暂无内容",
      type: String
    },
    speed: {
      default: 'middle',
      type: String
    },
    paused: {
      type: Boolean,
      default: true
    },
    /*showtwo: {
      type: Boolean,
      default: true
    }*/
  },
  watch: {
    content() {
      var _this = this;
      setTimeout(() => {
        _this.$nextTick(() => {
          let out = _this.$refs.out.clientWidth;
          let _in = _this.$refs.in.clientWidth;
          _this.pWidth = 2 * _in;
          if (this.paused) {
            _this.run = false;
          } else {
            _this.run = _in > out ? true : false;
          }
        });
      }, 0);
    },
    paused() {
      this.run = !this.paused;
    }
  },
  mounted() {
    var _this = this;
    this.$nextTick(() => {
      let out = _this.$refs.out.clientWidth;
      let _in = _this.$refs.in.clientWidth;
      if (this.paused) {
        _this.run = false;
      } else {
        _this.run = _in > out ? true : false;
      }
    });
  }
}
</script>
<style lang="less" scoped>
.marquee-box {}

.marquee-content {
  overflow: hidden;
  width: 100%
}

.marquee-content p {
  display: inline-block;
  white-space: nowrap;
  margin: 0;
  font-size: 0;
}

.marquee-content span {
  display: inline-block;
  white-space: nowrap;
  padding-right: 40px;
  font-size: 24px;
  color: white;
}

/*.quick {
  -webkit-animation: marquee 5s linear infinite;
  animation: marquee 5s linear infinite;
}
.middle {
  -webkit-animation: marquee 8s linear infinite;
  animation: marquee 8s linear infinite;
}
.slow {
  -webkit-animation: marquee 25s linear infinite;
  animation: marquee 25s linear infinite;
}
@-webkit-keyframes marquee {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(-50%, 0, 0);
  }
}
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}*/


.quick {
  .animation(marquee 5s linear infinite)
}
.middle {
  .animation(marquee 8s linear infinite)
}

.slow {
  .animation(marquee 25s linear infinite)
}

.keyframes (@name, @frames) {
  @-webkit-keyframes @name { @frames(); }
  @-moz-keyframes @name { @frames(); }
  @-ms-keyframes @name { @frames();}
  @-o-keyframes @name { @frames(); }
  @keyframes @name { @frames(); }
}
.keyframes (
    marquee,
    {
      0%{
        .transform(translateX(0));
      }
      100%{
        .transform(translateX(-50%));
      }
    }
);
.test{
  .transform(translateX(0));
}
.transform(@attr){
  -webkit-transform:@attr;
  -moz-transform:@attr;
  -o-transform:@attr;
  -ms-transform:@attr;
  //transform:@attr;
}
.animation(@attr){
  -webkit-animation: @attr;
  -moz-animation: @attr;
  -ms-animation: @attr;
  -o-animation: @attr;
  animation: @attr;
}

</style>
